<!-- Created by shi.pengyan on 2016-10-30. -->
<template>
  <div>

<!--    <el-form :inline="true" :model="form">
      <el-form-item label="是否上架">
        <el-radio-group v-model="form.isActive">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.productName" placeholder="产品名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.clientName" placeholder="客户姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.mobile" placeholder="联系方式"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryValueByKeyHandler">查询</el-button>
      </el-form-item>
    </el-form>-->

    <search-form ref="searchForm"/>

    <el-table :data="getPeAppointments" height="500" border :stripe="true" :highlight-current-row="true"
              @current-change="tableRowChangeClickHandler"
              style="width: 100%">
      <el-table-column type="index" width="60"/>
      <!--<el-table-column prop="appointmentId" label="预约ID" width="150"/>-->
      <!--<el-table-column prop="createUserId" label="客户ID" width="150"/>-->
      <el-table-column prop="clientName" label="客户姓名" width="150"/>
      <el-table-column prop="clientMobile" label="客户手机" width="150"/>
      <!--<el-table-column prop="productId" label="产品ID" width="150"/>-->
      <el-table-column prop="productName" label="产品名称"/>
      <!--<el-table-column prop="appointmentTime" label="预约时间" width="155"/>-->
      <el-table-column prop="appointmentTimeString" label="预约时间" width="155"/>
      <!--<el-table-column prop="createDate" label="创建时间" width="155"/>-->
     <!-- <el-table-column prop="isValid" label="Is Valid" :formatter="formatterHandler" width="100"/>-->
    </el-table>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="getPeAppointmentsCurrentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="getPeAppointmentsPageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="getPeAppointmentsTotalCount">
      </el-pagination>
    </div>

  </div>
</template>

<style lang="scss">
  .btn-group-wrapper {
    padding-bottom: 4px;
  }
</style>

<script type="text/babel">
  import { mapActions, mapGetters } from 'vuex'

  import moduleStore from './bll/appointmentsStore'
  import store from '../../store'
  (!store.state.sysAppointments) && store.registerModule('sysAppointments', moduleStore)

  import SearchForm from './searchForm.vue'

  export default{
    data() {
      return {
        form: {
          isActive: true,
          productName: null,
          clientName: null,
          mobile: null
        },
        currentAppointment: null
      }
    },
    computed: {
      ...mapGetters(['getPeAppointments', 'getPeAppointmentsCurrentPage', 'getPeAppointmentsTotalCount', 'getPeAppointmentsPageSize'])
    },
    components: {SearchForm},

    mounted() {
      console.log('[Appointments Page] mounted');
      this.queryAppointments();
    },

    methods: {
      ...mapActions(['queryAppointments']),

      tableRowChangeClickHandler (row, event, column) {
        console.log(row);
        this.currentAppointment = row;
      },
      handleSizeChange (val) {
        console.log(`每页 ${val} 条`);
        this.$store.state.pageSize = val;
        this.queryAppointments({pageIndex: 1, pageSize: val, ...this.$refs.searchForm.getPreForm()});
      },
      handleCurrentChange (val) {
        console.log(arguments);
        console.log(`current${val}`);
        this.queryAppointments({pageIndex: val, pageSize: this.getPeAppointmentsPageSize, ...this.$refs.searchForm.getPreForm()});
      },
      formatterHandler (row, column) {
        switch (column.property) {
          case 'isValid':
            return row.isValid === true ? 'Yes' : 'No';
        }
      }
    }
  }
</script>
